<template>
  <div class="poetry-sets sg-flex-column">
    <sg-header @back="$emit('back')" :centerStatus="''" :backVisible="false">
      <span slot="left"
        >{{ userID ? "我的" : "公开" }}选集（{{
          sets.length ? sets.length : "?"
        }}）</span
      >
      <span
        class="iconfont icon-increase"
        slot="right"
        @click="onNewSet"
      ></span>
    </sg-header>
    <!-- 选集列表 -->
    <div class="sg-flex-one scroll-wrapper">
      <div class="scroll" sg-scroll="vertical_stop">
        <div class="wrapper">
          <div
            v-for="item in sets"
            :key="item.id"
            @click="onClickSet(item)"
            :class="{
              'set-item': true,
              'sg-flex': true,
              'set-item__selected': currentId === item.id,
            }"
          >
            <span class="choice"></span>
            <div class="sg-flex-one sg-text-ellipsis">{{ item.name }}</div>
            <span
              v-show="item.isOwn"
              class="iconfont icon-delete"
              @click.stop="onDeleteSet(item)"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { apiURL, apiGetData, apiPostData } from '@/api'

export default {
  name: 'PoetrySets',

  props: {
    defId: {
      type: [Number, String],
      default: 0
    }
  },

  data () {
    return {
      currentId: 0,
      sets: []
    }
  },

  computed: {
    ...mapState({
      userID: (state) => state.auth.userID
    })
  },

  created () {
    window.poetrySets = this
    this.currentId = this.defId
    this.getPoetSets()
  },

  methods: {
    getPoetSets (selectLast) {
      apiGetData(apiURL.poetSets, { userId: this.userID }).then((resp) => {
        const selfId = this.userID
        const systemSets = []
        const selfSets = []
        resp.data.forEach((o) => {
          o.isOwn = +o.userId === selfId
          if (o.isOwn) {
            selfSets.push(o)
          } else {
            systemSets.push(o)
          }
        })
        const timeSortFunc = function (o0, o1) {
          const time0 = new Date(o0.timeCreate).getTime()
          const time1 = new Date(o1.timeCreate).getTime()
          return time0 >= time1 ? 1 : -1
        }
        this.sets = [
          ...systemSets.sort(timeSortFunc),
          ...selfSets.sort(timeSortFunc)
        ]
        if (selectLast) {
          this.onClickSet(selfSets[0])
        }
      })
    },

    onDeleteSet ({ id }) {
      apiGetData(apiURL.poetryList, {
        setId: id,
        limit: 1
      }).then((resp) => {
        const list = resp.data || []
        if (list.length) {
          this.$toast('该选集下拥有诗词，禁止删除')
          return
        }
        this.$confirm({
          title: '提示',
          content: '是否删除该选集',
          confirm: () => {
            apiPostData(apiURL.poetSetDelete, { id }).then((resp) => {
              const index = this.sets.findIndex((o) => o.id === id)
              this.sets.splice(index, 1)
            })
          }
        })
      })
    },

    onClickSet ({ id, name }) {
      this.setSelectedSet(id)
      this.$emit('select', { id, name })
    },

    setSelectedSet (id) {
      this.currentId = id
    },

    onNewSet () {
      if (!this.userID) {
        this.$toastLogin()
        return
      }
      this.$confirm({
        title: '创建选集',
        type: 'input',
        placeholder: '请输入选集名',
        validator: (v) => {
          if (!v) {
            this.$toast('请输入选集名')
            return '请输入选集名'
          }
          if (v.length > 16) {
            this.$toast('选集名长度不能超过16个字符')
            return '选集名长度不能超过16个字符'
          }
          const o = this.sets.find((o) => o.name === v)
          if (o) {
            this.$toast('选集名重复')
            return '选集名重复'
          }
          return ''
        },
        confirm: (v) => {
          apiPostData(apiURL.poetSetCreate, { name: v }).then((resp) => {
            this.getPoetSets(true)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/ui/style/const.scss";

$set-item-height: $height-text * 2;
$set-item-size: $size-text * 1.2;
.poetry-sets {
  background-color: $color-bg;
  .scroll-wrapper {
    overflow: hidden;
    padding: $padding-normal 0;
  }
  .wrapper {
    padding: 0 $padding-normal;
  }
  .scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .set-item {
    height: $set-item-height;
    line-height: $set-item-height;
    padding: 0 $padding-big;
    margin-bottom: 0.5rem;
    font-size: $set-item-size;
    color: $color-text;
    background-color: rgba(255, 255, 255, 0.5);
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  .sg-flex {
    align-items: center;
  }
  .icon-delete {
    margin-left: 1rem;
    font-size: $set-item-size * 1.5;
  }
  .choice {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 1rem;
    border-radius: 50%;
    border: 2px solid $color-theme-disabled;
  }
  .set-item__selected {
    color: $color-theme;
    .choice {
      border-color: $color-theme;
      &::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: $color-theme;
      }
    }
  }
}
</style>
